<template>
    <div class="app-container">

        <h2 style="text-align: center;">修改订单</h2>
        <el-form label-width="120px">

            <el-form-item label="课程封面">
                <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                    :action="BASE_API + '/eduoss/fileoss'" class="avatar-uploader">
                    <img :src="orderInfo.cover">
                </el-upload>
            </el-form-item>
            <el-form-item label="修改课程信息">
                <el-select v-model="value" placeholder="请选择" @click="selectCourseInfo()">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="修改用户信息">
                <el-input style="width:180px" v-model="orderInfo.mobile" placeholder="请输入用户手机号"></el-input>
            </el-form-item>

            <el-form-item label="修改订单金额">
                <el-input-number :min="0" v-model="orderInfo.price" controls-position="right" placeholder="请填写订单金额" />
            </el-form-item>

            <el-form-item label="修改订单状态">
                <el-input-number :min="0" v-model="orderInfo.status" controls-position="right" placeholder="" />
            </el-form-item>

            <div>
                <el-button @click="previous">返回上一页</el-button>
                <el-button :disabled="false" style="float:right" type="primary" @click="update">前往修改该订单信息</el-button>
            </div>

        </el-form>
    </div>
</template>
<script>
import order from '@/api/edu/order'

export default {
    data() {
        return {
            orderId: '',
            orderInfo: {},
            options: [],
            value: '',
        }
    },

    created() {
        this.selectCourseInfo();
        if (this.$route.params && this.$route.params.id) {
            this.orderId = this.$route.params.id;
            order.getOrderById(this.orderId).then(response => {
                this.orderInfo = response.data.tOrder;
            })
        }
    },

    methods: {
        selectCourseInfo() {
            order.selectCourseInfo().then(response => {
                this.options = response.data.res;
            })
        },

        // 点击返回修改按钮执行这个方法
        previous() {
            this.$router.push({ path: '/order/table/' })
        },
        // 点击更新订单信息按钮
        update() {
            this.$confirm('此操作将前往更新订单信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                order.updateOrder(this.orderId,this.orderInfo).then(response=>{
                    if(response.success){
                        this.$message({
                        type: 'success',
                        message: '订单更新成功!'
                    });
                    }
                });
                this.$router.push({ path: '/order/table/' })
            })
        },
    }
}
</script>

<style scoped>
.tinymce-container {
    line-height: 29px;
}
</style>